<template>
  <view class="tui-progress__box">
    <view
      class="tui-progressbar__bg"
      :style="{ height: width + 'rpx', borderRadius: radius, background: backgroundColor }"
    >
      <view
        class="tui-progress__bar"
        :style="{
          height: width + 'rpx',
          background: activeColor,
          transform: `translate3d(-${translateX},0,0)`,
          transitionDuration: `${time}s`,
        }"
      ></view>
    </view>
    <view
      class="tui-progress__percent"
      :style="{ width: percentWidth + 'rpx', fontSize: size + 'rpx', color: color }"
      v-if="showInfo"
    >
      {{ percentage }}%
    </view>
  </view>
</template>

<script>
export default {
  name: 'tuiProgress',
  emits: ['activeend'],
  props: {
    //百分比 0-100
    percent: {
      type: [Number, String],
      default: 0,
    },
    //右侧是否显示百分比
    showInfo: {
      type: Boolean,
      default: false,
    },
    //圆角大小
    radius: {
      type: String,
      default: '8rpx',
    },
    //右侧百分比字体大小 rpx
    size: {
      type: Number,
      default: 28,
    },
    //右侧百分比颜色
    color: {
      type: String,
      default: '#333',
    },
    //右侧百分比宽度
    percentWidth: {
      type: Number,
      default: 96,
    },
    //进度条线条宽度 rpx
    width: {
      type: Number,
      default: 8,
    },
    //已选进度条颜色,可渐变
    activeColor: {
      type: String,
      default: '#5677fc',
    },
    //未选择的进度条的颜色
    backgroundColor: {
      type: String,
      default: '#EBEBEB',
    },
    //进度增加1%所需毫秒数
    duration: {
      type: Number,
      default: 15,
    },
  },
  watch: {
    percent(val) {
      this.darwProgress();
    },
  },
  mounted() {
    this.darwProgress();
  },
  data() {
    return {
      percentage: 0,
      translateX: '-100%',
      time: 0,
    };
  },
  methods: {
    darwProgress() {
      let percent = Number(this.percent);
      percent = percent > 100 ? 100 : percent;
      this.time = (this.duration * Math.abs(percent - this.percentage)) / 1000;
      if (percent < this.percentage && this.percentage - percent > 30) {
        //后百分比数大于30时 时间缩短
        this.time = this.time / 2;
      }
      setTimeout(() => {
        this.$emit('activeend', {});
      }, this.time);
      this.percentage = percent;
      this.translateX = 100 - percent + '%';
    },
  },
};
</script>

<style scoped>
.tui-progress__box {
  width: 100%;
  display: flex;
  align-items: center;
}

.tui-progressbar__bg {
  width: 100%;
  position: relative;
  overflow: hidden;
  transform: translateZ(0);
}

.tui-progress__bar {
  width: 100%;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 2;
  transform: translateX(-100%);
  transition-delay: 0s;
  transition-property: transform;
  transition-timing-function: linear;
}

.tui-progress__percent {
  text-align: center;
}
</style>
